<template>
	<m-layout class="Rechargee" title="充值" gap="24" ftcolor="#fff" barBg="unset" :scrollTop="scrollTop" color="#ffffff"
		scrollColor="#FFD100">
		<view slot="right">
			<text @click="Jump(`/pages/wallet/recharge/recode/recode`)">充值记录</text>
		</view>
		<m-block class="" slot="header" gap="10 0 10 20" bgColor="unset">
			<mtab class="tabBox" :tabList='tabList' :tabIdx='tabIndex' @change="tabIndex = $event" color="#d9d9d9"
				activeColor="#fff" />
		</m-block>
		<template v-if="tabIndex==1">
			<m-block spa="30 0" gap="90 30 30" style="position: relative;">
				<text class="fs21 tagBox">*线下充值操作完成后请务必提交充值凭证</text>
				<h3 class="fs30 flex-center">线下充值通道</h3>
				<m-block gap="30 0 0">
					<view class="flex ptb-20">
						<text class="fs28 fw-600">银行对公账户信息</text>
					</view>
					<view class="flex-between">
						<text class="fs24">账户名称：</text>
						<view class="fs24">
							<text>{{getConfig(708)}}</text>
							<m-copy class="ml-16" :str="getConfig(708)"></m-copy>
						</view>
					</view>
					<view class="flex-between ptb-20">
						<text class="fs24">账户号码：</text>
						<view class="fs28">
							<text>{{getConfig(709)}}</text>
							<m-copy class="ml-16" :str="getConfig(709)"></m-copy>
						</view>
					</view>
					<view class="flex-between">
						<text class="fs24">开户银行：</text>
						<view class="fs24">
							<text>{{getConfig(710)}}</text>
							<m-copy class="ml-16" :str="getConfig(710)"></m-copy>
						</view>
					</view>
				</m-block>
				<m-block gap="30 0" >
					<view class="flex ptb-20">
						<text class="fs28 fw-600">公司收款码信息</text>
					</view>
					<view class="flex-between ptb-20">
						<text class="fs24">收款商户：</text>
						<view class="fs28">
							<text>{{getConfig(711)}}</text>
							<m-copy class="ml-16" :str="getConfig(709)"></m-copy>
						</view>
					</view>
					<view class="flex-between ai-flex-start">
						<text class="fs24">收款码：</text>
						<view class="fs28 flex-column ta-center">
							<m-image2 :isPreview="true" :src="config712" size="200"></m-image2>
							<text class="fs21 mt-12">点击放大二维码</text>
						</view>
					</view>
				</m-block>
				<view class="tips fs21 mt-24 flex-between" style="color:red">
					<text>*请仔细核对信息后再操作</text>
					<view class="" @click="Jump('/pages/wallet/recharge/submit/submit')">
						<m-button class="fs21" type="hollow" size="small">提交凭证</m-button>
					</view>
				</view>
			</m-block>
		</template>
		<template v-if="tabIndex==2">
			<view class="head flex-between">
				<text>充值类型</text>
				<view class="flex-center">
					<text>{{ nowCoin['coinname'] }}</text>
				</view>
			</view>
			<view class="form-Item flex"><input v-model="amount" type="digit" placeholder="充值数量" /></view>
			<m-block gap="30" spa="20 0" class="Rechargee-type">
				<view class="flex-between">
					<text>充值选择</text>
					<text class="blance">{{ nowCoin['coinname'] }}：{{ myBalance | integer(2, true) }}</text>
				</view>
				<view class="card">
					<template v-for="item in amountArr">
						<view @click="amount = item" :class="{ active: amount == item }">
							<view class="flex">
								<text>￥</text>
								<text>{{ item }}</text>
							</view>
							<text>售价：￥{{ item }}</text>
						</view>
					</template>
				</view>
			</m-block>
			<m-block gap="30" class="pay-type">
				<payType :type="payList" :removeBalance="true" v-model="payType"></payType>
			</m-block>
			<view class="btn-box">
				<m-button @click="verify" :loading="payLoading" :disabled="btnDisabled">{{btnText}}</m-button>
			</view>
		</template>

	</m-layout>
</template>

<script>
	import { Recharge } from '@/api/Payment.js'
	import { balance } from "@/api/Users.js"
	import { mapState } from 'vuex';
	import cookie from '@/utils/auth.js'
	export default {
		data() {
			return {
				tabIndex: 1,
				tabList: [
					
					{
						title: '线下充值',
						idx: 1
					},
					// {
					// 	title: '线上充值',
					// 	idx: 2
					// },
				],
				tipShow: false,
				scrollTop: 0,
				payLoading: false,
				amount: '',
				payType: '34',
				payList: {
					// 12: '支付宝',
					// 2: '微信',
					// 21: '微信支付',
					// 22: '银行卡',
					// 23: '云闪付扫码',
					// 31: '支付宝通道2',
					// 32: '微信扫码',
					34: '聚合支付',
				},
				coinCode: '1', //默认余额
				amountArr: [100, 200, 300, 500, 800, 1000, 2000, 3000, 5000]
			};
		},
		computed: {
			...mapState({
				userbalance: state => state.user.userbalance,
				userinfo: state => state.user.userinfo,
				config: state => state.general.config,
			}),
			config712(){
				return this.config[712]
			},
			nowCoin() {
				console.log(this.userbalance);
				return this.userbalance[this.coinCode];
			},
			myBalance() {
				return this.userbalance[this.coinCode]['balance'] - this.userbalance[this.coinCode]['lockbalance'];
			},
			btnText() {
				return '充值';
				// return '即将上线';
			},
			btnDisabled() {
				return false;
				
				// return true;
			}

		},
		onPageScroll({ scrollTop }) {
			this.scrollTop = scrollTop;
		},
		async onShow() {
			this.payLoading = false;
			await balance();
			// GetUserBalanceDataList();
			// const { success, data } = await GetRechargeeFaceValueList();
			// if (success) {
			// 	const a = data.map(item => {
			// 		return item.RechargeeFaceValueName;
			// 	}, []);
			// 	this.amountArr = a;
			// }
		},
		methods: {
			// 跳转微信小程序
			async jumpWX() {
				try {
					// #ifdef APP-PLUS
					plus.share.getServices(function(res) {
						var sweixin = null;
						for (var i = 0; i < res.length; i++) {
							var t = res[i];
							if (t.id == 'weixin') {
								sweixin = t;
							}
						}
						if (sweixin) {
							sweixin.launchMiniProgram({
								id: 'wx390ed26e26e117bb', //这里写你的小程序原始id（以gh开头）
								type: 0, //这里是不同的环境（默认0）
								path: `/pages/farm/index?token=${cookie.get('Token')}` //这里是指定页的路径，如需传参直接字符串拼接（首页可以省略）
							});
						}
					}, function(res) {
						// 回调
						console.log(JSON.stringify(res));
					});
					// #endif
				} catch (e) {
					console.info("e", e);
				}
			},
			// 充值提交
			async verify() {
				if (Number(this.payType) == 1 && !this.userinfo.wxopenid) {
					return;
				}
				if (!this.amount) {
					return this.Toast('请输入充值金额');
				}
				if (!this.payType) {
					return this.Toast('请选择充值方式');
				}
				const { success, msg, data } = await Recharge({
					amount: this.amount,
					paytype: this.payType,
					resulttype: ''
				});
				console.log('data===>', data)
				if (!success) return this.Toast(msg)
				this.payLoading = true;
				console.log('---data---', data)
				this.payJump(data, this.payType);
				// this.goPay(data)
				setTimeout(() => {
					this.payLoading = false;
				}, 5000);
				// this.Jump('/pages/webview/webview?url=' + data)
			},
			aa() {
				uni.login({
					success: res => {
						console.info('login-res', res);
						let appid = 'wx390ed26e26e117bb'; //小程序appid
						let secret = '413dc42ca71968757d0d9fe96a4153d6'; //小程序secret
						//wx接口路径
						let url =
							"https://api.weixin.qq.com/sns/jscode2session?appid=" +
							appid +
							"&secret=" +
							secret +
							"&js_code=" +
							res.code +
							"&grant_type=authorization_code";
						uni.request({
							url: url, // 请求路径
							data: {}, // 请求体
							method: 'GET', //请求方法,
							header: {}, //请求头
							success: result => {
								//响应成功
								//这里就获取到了openid了
								console.info('result', result);
								uni.setStorage({
									key: 'user',
									data: result.data.openid
								})
							},
							fail: err => {
								console.log('err', err)
							} //失败
						});
					}
				});
			},
			goPay(data) {
				console.log('data===>', data)
				//订单对象，从服务器获取 // 注意 如果是 支付宝支付provider固定值就是alipay
				uni.requestPayment({ //拿到订单信息后 调用 uniapp的支付接口 唤起支付
					provider: 'alipay', //微信就是 wxpay
					orderInfo: '119490218548244561', //支付宝订单数据 从后端拿到的数据
					success: function(res) {
						uni.showToast({
							title: "支付成功",
							icon: 'success',
							success: () => {
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/farm/index'
									})
								}, 500)
							}
						})
					},
					fail: function(err) {
						uni.showToast({
							title: "支付失败请稍后再试",
							icon: 'none',
							success: () => {
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/my/my'
									})
								}, 500)
							}
						})
						console.log('fail:' + JSON.stringify(err));
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.Rechargee {
		// background: url('../../../static/images/pages/wallet/recharge_bg.png') no-repeat;
		background: linear-gradient(133deg, #304FFF 0%, #FFD100 100%) no-repeat;
		background-size: 100% 500rpx;

		::v-deep .layout-content {
			padding: 0px 30rpx !important;
		}
	}

	.head {
		padding-top: 60rpx;
		padding-left: 0rpx;
		padding-right: 0rpx;
		padding-bottom: 0rpx;

		text {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #fff;
		}
	}

	.form-Item {
		margin: 10rpx 0rpx 30rpx;
		padding: 30rpx 0rpx;
		border-bottom: 1px solid #eeeeee;

		input {
			color: #fff;
			font-size: 40rpx;
		}

		.uni-input-placeholder {
			color: #d0d0d0;
			font-size: 42rpx;
		}
	}

	.Rechargee-type {
		.blance {
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.card {
			padding-top: 20rpx;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-gap: 20rpx;

			&>view {
				padding: 16rpx 0;
				text-align: center;
				background: #f6f6f6;
				border-radius: 10rpx;
				border: 2rpx solid #f6f6f6;

				&>view:nth-of-type(1) {
					display: block;

					&>text {
						font-size: 36rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333;
					}
				}

				&>text {
					padding-top: 5rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999 !important;
				}
			}

			.active {
				border: 2rpx solid #fa2b47;
				background-color: #ffebee;

				text {
					color: #fa2b47 !important;
				}
			}
		}
	}

	.types-card {
		.head {
			padding-bottom: 20rpx;

			text {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	.btn-box {
		padding-top: 50rpx;
	}

	.tabBox {
		::v-deep .active:after {
			background-color: #fff !important;
		}
	}
	.tagBox{
		width: 100%;
		left: 0rpx;
		top:0rpx;
		padding: 16rpx 16rpx;
		background-color: #faf0f0;
		position: absolute;
		color: red;
		font-weight: 600;
	}
</style>